<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景设置</title>
    <style>
        div{
            font-size: 30px;
            color: red;
            width: 200px;
            height: 200px;
            border: 5px solid red;

            /*!*背景颜色*!
            background-color: grey;
            !*背景图片 (默认背景图片铺满) *!
            background-image: url("../day03/red.png");
            !*背景图片重复   repeat-x(横向) repeat-y(纵向) no-repeat(不重复)*!
            background-repeat: no-repeat;
            !*背景图片位置  x轴偏移位置   y轴偏移位置 *!
            background-position: 0px 0px;*/
            /* 背景样式整合  颜色  图片路径 图片位置 是否重复*/
            background: grey url("../day03/red.png") 0px 0px no-repeat;



            /*背景的尺寸  contain包含(当前图片永远在盒子中)  cover覆盖(会超出去)*/
            background-size: contain;
        }
    </style>

</head>
<body>
    <div>
        盒子
    </div>

</body>
</html>